<template>
  <div class="operation-record">
    <!-- 搜索筛选区 -->
    <div class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="时间范围:">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="datetimerange"
            range-separator="—"
            start-placeholder="2025-05-01 00:00:00"
            end-placeholder="2025-05-02 00:00:00"
            value-format="yyyy-MM-dd HH:mm:ss"
            class="date-picker"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="类型:">
          <el-select 
            v-model="filterForm.operationType" 
            placeholder="电"
            clearable
            class="filter-select"
          >
            <el-option label="电" value="electric"></el-option>
            <el-option label="水" value="water"></el-option>
            <el-option label="气" value="gas"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作类型:">
          <el-select 
            v-model="filterForm.actionType" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="强制合闸" value="force_close"></el-option>
            <el-option label="强制拉闸" value="force_open"></el-option>
            <el-option label="充值" value="charge"></el-option>
            <el-option label="退费" value="refund"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="下发状态:">
          <el-select 
            v-model="filterForm.deliveryStatus" 
            placeholder="全部"
            clearable
            class="filter-select"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="下发成功" value="success"></el-option>
            <el-option label="下发失败" value="failed"></el-option>
            <el-option label="下发中" value="pending"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="房间号:">
          <el-input 
            v-model="filterForm.roomNumber" 
            placeholder="请输入"
            clearable
            class="filter-input"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="searchData">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetFilter">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 数据表格 -->
    <div class="table-container">
      <div class="table-header">
        <div class="table-title">
        </div>
        <div class="table-info">
          共 {{ tableData.length }} 条数据
        </div>
      </div>
        <el-table 
          :data="tableData" 
          border 
          stripe
          style="width: 100%"
          :header-cell-style="headerCellStyle"
          class="custom-table"
          v-loading="loading"
          element-loading-text="加载中..."
          :row-style="{backgroundColor: '#fff'}"
        >
        <el-table-column prop="projectName" label="项目名称" width="180" align="center"></el-table-column>
        <el-table-column prop="roomNumber" label="房间号" width="100" align="center"></el-table-column>
        <el-table-column prop="operationType" label="操作类型" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="getOperationTypeColor(scope.row.operationType)"
            >
              {{ scope.row.operationType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="deliveryContent" label="下发内容" width="120" align="center"></el-table-column>
        <el-table-column prop="operator" label="操作人" width="100" align="center"></el-table-column>
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <el-tag 
              size="small" 
              :type="scope.row.status === '下发成功' ? 'success' : 'warning'"
            >
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" width="150" align="center"></el-table-column>
        <el-table-column prop="operationTime" label="执行时间" width="160" align="center"></el-table-column>
        <el-table-column label="操作" width="120" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button 
              type="primary" 
              size="mini" 
              icon="el-icon-view"
              @click="viewDetail(scope.row)"
            >
              详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        class="mt-4"
      >
      </el-pagination>
    </div>
    <!-- 详情弹窗 -->
    <el-dialog
      title="操作记录详情"
      :visible.sync="showDetailDialog"
      width="700px"
      class="custom-dialog"
      :close-on-click-modal="false"
    >
      <div class="detail-content">
        <div class="detail-header">
          <h3>{{ selectedRecord ? selectedRecord.projectName : '' }}</h3>
          <div class="detail-status">
            <el-tag 
              size="small" 
              :type="selectedRecord && selectedRecord.status === '下发成功' ? 'success' : 'warning'"
            >
              {{ selectedRecord ? selectedRecord.status : '' }}
            </el-tag>
          </div>
        </div>
        <div class="detail-info">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="房间号">
              {{ selectedRecord ? selectedRecord.roomNumber : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="操作类型">
              <el-tag 
                size="small" 
                :type="selectedRecord ? getOperationTypeColor(selectedRecord.operationType) : 'default'"
              >
                {{ selectedRecord ? selectedRecord.operationType : '' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="下发内容">
              {{ selectedRecord ? selectedRecord.deliveryContent : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="操作人">
              {{ selectedRecord ? selectedRecord.operator : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="执行时间">
              {{ selectedRecord ? selectedRecord.operationTime : '' }}
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag 
                size="small" 
                :type="selectedRecord && selectedRecord.status === '下发成功' ? 'success' : 'warning'"
              >
                {{ selectedRecord ? selectedRecord.status : '' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="备注" :span="2">
              {{ selectedRecord ? selectedRecord.remark : '' }}
            </el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="detail-timeline" v-if="selectedRecord">
          <h4>操作时间线</h4>
          <el-timeline>
            <el-timeline-item
              timestamp="2025-05-01 15:30:00"
              color="#0bbd87"
            >
              操作发起
            </el-timeline-item>
            <el-timeline-item
              timestamp="2025-05-01 15:30:05"
              color="#0bbd87"
            >
              指令下发
            </el-timeline-item>
            <el-timeline-item
              timestamp="2025-05-01 15:30:10"
              color="#0bbd87"
            >
              设备响应
            </el-timeline-item>
            <el-timeline-item
              timestamp="2025-05-01 15:30:15"
              color="#0bbd87"
            >
              操作完成
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="showDetailDialog = false">关闭</el-button>
        <el-button type="primary" @click="exportDetail">导出详情</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import operationRecordMock from '@/api/mock/operationRecord'
export default {
  name: 'OperationRecord',
  data() {
    return {
      loading: false,
      tableData: [],
      filterForm: {
        dateRange: ['2025-05-01 00:00:00', '2025-05-02 00:00:00'],
        operationType: 'electric',
        actionType: '',
        deliveryStatus: '',
        roomNumber: ''
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      showDetailDialog: false,
      selectedRecord: null,
      headerCellStyle: {
        backgroundColor: '#f8f9fa',
        color: '#495057',
        fontWeight: 'bold',
        textAlign: 'center'
      }
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    loadData() {
      this.loading = true
      setTimeout(() => {
        const response = operationRecordMock
        this.tableData = response.msg.list
        this.pagination.total = response.msg.total
        this.loading = false
      }, 500)
    },
    searchData() {
      this.pagination.currentPage = 1
      this.loadData()
    },
    resetFilter() {
      this.filterForm = {
        dateRange: ['2025-05-01 00:00:00', '2025-05-02 00:00:00'],
        operationType: 'electric',
        actionType: '',
        deliveryStatus: '',
        roomNumber: ''
      }
      this.loadData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val
      this.loadData()
    },
    getOperationTypeColor(type) {
      const colorMap = {
        '强制合闸': 'success',
        '强制拉闸': 'danger',
        '充值': 'primary',
        '退费': 'warning',
        '读表': 'info'
      }
      return colorMap[type] || 'default'
    },
    viewDetail(record) {
      this.selectedRecord = record
      this.showDetailDialog = true
    },
    exportDetail() {
      this.$message.success('导出详情功能')
    }
  }
}
</script>
<style scoped>
/* 主容器样式 */
.operation-record {
  padding: 24px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  min-height: 100vh;
}
/* 面包屑导航 */
.breadcrumb-nav {
  margin-bottom: 24px;
}
/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.page-title {
  margin: 0;
  color: #2c3e50;
  font-size: 24px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-title i {
  color: #9b59b6;
  font-size: 28px;
}
/* 筛选容器 */
.filter-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 24px;
  padding: 24px;
}
.filter-form {
  margin: 0;
}
.date-picker {
  width: 350px;
}
.filter-input {
  width: 150px;
}
.filter-select {
  width: 120px;
}
/* 表格容器 */
.table-container {
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}
.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.table-title {
  font-size: 18px;
  font-weight: 600;
  color: #2c3e50;
  display: flex;
  align-items: center;
  gap: 8px;
}
.table-title i {
  color: #9b59b6;
  font-size: 20px;
}
.table-info {
  color: #6c757d;
  font-size: 14px;
}
/* 分页容器 */

/* 详情弹窗样式 */
.detail-content {
  padding: 20px;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e9ecef;
}
.detail-header h3 {
  margin: 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
}
.detail-info {
  margin-bottom: 24px;
}
.detail-timeline {
  margin-top: 24px;
}
.detail-timeline h4 {
  margin: 0 0 16px 0;
  color: #2c3e50;
  font-size: 16px;
  font-weight: 600;
}
/* 响应式设计 */
@media (max-width: 768px) {
  .operation-record {
    padding: 16px;
  }
  .filter-form {
    flex-direction: column;
  }
  .date-picker,
  .filter-input,
  .filter-select {
    width: 100%;
  }
  .table-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
  .detail-header {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}
</style>


.el-table {
  color: #303133;
}

.el-table th,
.el-table td {
  color: #303133;
}


